Reviewing files that changed from the base of the PR and between a65ff03 and 2d20a68.

• health/micro-ui/web/micro-ui-internals/packages/modules/health-payments/src/components/bill_inbox/bill_boundary_filter.js (1 hunks)
• health/micro-ui/web/micro-ui-internals/packages/modules/health-payments/src/pages/employee/ViewAttendance.js (2 hunks)
• health/micro-ui/web/micro-ui-internals/packages/modules/health-payments/src/pages/employee/my_bills.js (1 hunks)

health/micro-ui/web/micro-ui-internals/packages/modules/health-payments/src/pages/employee/my_bills.js (2)

1-8: Consider consolidating component imports.

Components are being imported from two similarly named packages: @egovernments/digit-ui-react-components and @egovernments/digit-ui-components. Consider consolidating imports from a single package or document the reason for using two separate packages.

---

43-50: Fix effect dependencies and consolidate storage cleanup.

The effect is missing its dependencies array and the storage cleanup could be consolidated.

health/micro-ui/web/micro-ui-internals/packages/modules/health-payments/src/pages/employee/ViewAttendance.js (9)

47-47: Simplify boolean expression

Use the truthiness of registerNumber directly instead of a ternary operator.

Apply this diff:

- enabled: registerNumber ? true : false,
+ enabled: !!registerNumber,

🧰 Tools

🪛 Biome (1.9.4)

[error] 47-47: Unnecessary use of boolean literals in conditional expression.

Simplify your code by directly assigning the result without using a ternary operator.
If your goal is negation, you may use the logical NOT (!) or double NOT (!!) operator for clearer and concise code.
Check for more details about NOT operator.
Unsafe fix: Remove the conditional expression with

(lint/complexity/noUselessTernary)

---

88-88: Simplify boolean expression

Use AttendanceData directly rather than using a ternary operator.

Apply this diff:

- enabled: ((AttendanceData ? true : false) && disabledAction && data?.[0]?.musterRollStatus !== "APPROVED") || triggerEstimate,
+ enabled: (AttendanceData && disabledAction && data?.[0]?.musterRollStatus !== "APPROVED") || triggerEstimate,

🧰 Tools

🪛 Biome (1.9.4)

[error] 88-88: Unnecessary use of boolean literals in conditional expression.

Simplify your code by directly assigning the result without using a ternary operator.
If your goal is negation, you may use the logical NOT (!) or double NOT (!!) operator for clearer and concise code.
Check for more details about NOT operator.
Unsafe fix: Remove the conditional expression with

(lint/complexity/noUselessTernary)

---

107-107: Simplify boolean expression

Rely on AttendanceData as a boolean indicator without a ternary operator.

Apply this diff:

- enabled: (AttendanceData ? true : false) && !disabledAction,
+ enabled: AttendanceData && !disabledAction,

🧰 Tools

🪛 Biome (1.9.4)

[error] 107-107: Unnecessary use of boolean literals in conditional expression.

Simplify your code by directly assigning the result without using a ternary operator.
If your goal is negation, you may use the logical NOT (!) or double NOT (!!) operator for clearer and concise code.
Check for more details about NOT operator.
Unsafe fix: Remove the conditional expression with

(lint/complexity/noUselessTernary)

---

282-282: Simplify boolean expression

Use a concise truthy check for individualIds.length instead of a ternary operator.

Apply this diff:

- enabled: individualIds.length > 0 ? true : false,
+ enabled: !!individualIds.length,

🧰 Tools

🪛 Biome (1.9.4)

[error] 282-282: Unnecessary use of boolean literals in conditional expression.

Simplify your code by directly assigning the result without using a ternary operator.
If your goal is negation, you may use the logical NOT (!) or double NOT (!!) operator for clearer and concise code.
Check for more details about NOT operator.
Unsafe fix: Remove the conditional expression with

(lint/complexity/noUselessTernary)

---

391-393: Return the loader component to display it

The <LoaderWithGap /> component inside the if block is not returned or rendered, so it won't display as intended.

Apply this diff to ensure the loader is displayed:

- if (updateMutation.isLoading) {
-   <LoaderWithGap />
- }
+ if (updateMutation.isLoading) {
+   return <LoaderWithGap />;
+ }

---

217-223: Avoid using setTimeout for navigation after showing toast

Using setTimeout to delay navigation can lead to unpredictable behavior if the UI experiences lag. Instead, use the onClose callback of the toast to ensure navigation occurs after the toast is dismissed.

Apply this diff:

- setShowToast({ key: "success", label: t("HCM_AM_ATTENDANCE_UPDATED_SUCCESSFULLY"), transitionTime: 3000 });
- // Delay the navigation for 3 seconds
- setTimeout(() => {
-   setUpdateDisabled(false);
-   history.push(`/${window.contextPath}/employee/payments/view-attendance?registerNumber=${registerNumber}&boundaryCode=${boundaryCode}`);
- }, 3000);
+ setShowToast({ 
+   key: "success", 
+   label: t("HCM_AM_ATTENDANCE_UPDATED_SUCCESSFULLY"), 
+   transitionTime: 3000,
+   onClose: () => {
+     setUpdateDisabled(false);
+     history.push(`/${window.contextPath}/employee/payments/view-attendance?registerNumber=${registerNumber}&boundaryCode=${boundaryCode}`);
+   },
+ });

---

226-228: Handle possible undefined error messages

Ensure that you have a default message in case error?.response?.data?.Errors is undefined or empty to prevent displaying undefined messages to the user.

Apply this diff:

- setShowToast({ key: "error", label: t(error?.response?.data?.Errors?.[0]?.message), transitionTime: 3000 });
+ const errorMessage = error?.response?.data?.Errors?.[0]?.message || t("COMMON_ERROR_MESSAGE");
+ setShowToast({ key: "error", label: errorMessage, transitionTime: 3000 });

---

508-537: Add a unique key prop for each child in the array

When rendering an array of elements in actionFields, each element should have a unique key prop to help React identify them.

Apply this diff to add key properties:

            actionFields={[
-             disabledAction ? (
+             disabledAction ? (
+               <Button
+                 key="goBackButton"
                  label={t(`HCM_AM_GO_BACK`)}
                  /* ...other props */
                />
              ) : editAttendance ? (
+               <Button
+                 key="submitButton"
                  /* ...other props */
                />
              ) : (
+               <Button
+                 key="actionsButton"
                  /* ...other props */
                />
              ),
            ]}

🧰 Tools

🪛 Biome (1.9.4)

[error] 508-537: Missing key property for this element in iterable.

The order of the items may change, and having a key can help React identify which item was moved.
Check the React documentation.

(lint/correctness/useJsxKeyInIterable)

---

341-346: 🧹 Nitpick (assertive)

Remove unnecessary comments or address TODOs

The comment /// need to update dependency may be outdated or unnecessary. Ensure that all comments are relevant, and remove any that are not needed.

Consider removing the comment if the dependencies are correctly set:

- }, [AllIndividualsData, data]); /// need to update dependency
+ }, [AllIndividualsData, data]);

Likely invalid or redundant comment.

health/micro-ui/web/micro-ui-internals/packages/modules/health-payments/src/components/bill_inbox/bill_boundary_filter.js (8)

3-3: Remove unused import CheckBox

The CheckBox component is imported but not used in this file. Removing it will clean up the code.

Apply this diff to remove the unused import:

- import { CheckBox, SubmitBar } from "@egovernments/digit-ui-components";
+ import { SubmitBar } from "@egovernments/digit-ui-components";

---

71-81: Enhance accessibility by adding keyboard event handlers

The <div> element with an onClick handler should support keyboard interactions for accessibility. Please add onKeyPress and tabIndex={0} to enable keyboard navigation for keyboard-only users.

Apply this diff:

  <div
    onClick={handleClearFilter}
+   onKeyPress={(e) => { if (e.key === 'Enter') handleClearFilter(); }}
+   tabIndex={0}
    style={{

🧰 Tools

🪛 Biome (1.9.4)

[error] 71-81: Enforce to have the onClick mouse event with the onKeyUp, the onKeyDown, or the onKeyPress keyboard event.

Actions triggered using mouse events should have corresponding keyboard events to account for keyboard-only navigation.

(lint/a11y/useKeyWithClickEvents)

---

86-86: Improve accessibility of the clickable <span> element

The <span> element with an onClick handler should support keyboard interactions and have appropriate accessibility attributes. Consider changing it to a <button> or adding tabIndex={0} and onKeyPress to enable keyboard navigation.

For example, change it to a <button>:

- <span onClick={() => { }} style={{ border: "1px solid #E0E0E0", padding: "6px", marginBottom: "10px" }}>
+ <button
+   onClick={() => { }}
+   style={{ border: "1px solid #E0E0E0", padding: "6px", marginBottom: "10px" }}
+   aria-label={t('Refresh')}
+ >

🧰 Tools

🪛 Biome (1.9.4)

[error] 86-86: Enforce to have the onClick mouse event with the onKeyUp, the onKeyDown, or the onKeyPress keyboard event.

Actions triggered using mouse events should have corresponding keyboard events to account for keyboard-only navigation.

(lint/a11y/useKeyWithClickEvents)

---

87-92: Provide accessibility attributes for SVG

Include role="img" and an aria-label or a <title> element in the SVG for screen readers to improve accessibility.

Update the SVG element as follows:

<svg
  width="17"
  height="17"
  viewBox="0 0 16 22"
  fill="none"
  xmlns="http://www.w3.org/2000/svg"
+ role="img"
+ aria-label={t("HCM_REFRESH_ICON")}
>

Alternatively, add a <title> element inside the SVG:

<svg
  width="17"
  height="17"
  viewBox="0 0 16 22"
  fill="none"
  xmlns="http://www.w3.org/2000/svg"
>
+ <title>{t("HCM_REFRESH_ICON")}</title>
  <path
    ...
  />
</svg>

🧰 Tools

🪛 Biome (1.9.4)

[error] 87-87: Alternative text title element cannot be empty

For accessibility purposes, SVGs should have an alternative text, provided via title element. If the svg element has role="img", you should add the aria-label or aria-labelledby attribute.

(lint/a11y/noSvgWithoutTitle)

---

95-106: Remove commented-out code

There is a block of commented-out code which should be removed to improve code cleanliness and maintainability. If this code might be needed later, you can retrieve it from version control.

---

36-44: Include updateBoundaryFilters in the dependency array

The useEffect hook uses updateBoundaryFilters, but it is not included in the dependency array. This could lead to unexpected behavior if updateBoundaryFilters changes without triggering the effect.

Update the dependency array as follows:

-    }, [levelSelected])
+    }, [levelSelected, updateBoundaryFilters])

---

116-116: Fix the spelling of updateSeeeionStorage prop

There's a typo in the prop name updateSeeeionStorage. It should be updateSessionStorage to ensure consistency and prevent confusion.

Apply this diff to correct the spelling:

-            updateSeeeionStorage={(newSelectedValues) => {
+            updateSessionStorage={(newSelectedValues) => {

---

10-10: 🧹 Nitpick (assertive)

Remove unused state variable boundaryType

The boundaryType state variable is declared but never updated or effectively used in the code. Since boundaryType is not utilized, consider removing it to simplify the code.

Apply this diff to remove boundaryType:

-    const [boundaryType, setBoundaryType] = useState("");

Likely invalid or redundant comment.

Reviewing files that changed from the base of the PR and between 2d20a68 and 12b115b.

• health/micro-ui/web/micro-ui-internals/packages/modules/health-payments/src/components/DateRangePicker.js (1 hunks)
• health/micro-ui/web/micro-ui-internals/packages/modules/health-payments/src/components/MyBillsSearch.js (1 hunks)
• health/micro-ui/web/micro-ui-internals/packages/modules/health-payments/src/components/MyBillsTable.js (1 hunks)
• health/micro-ui/web/micro-ui-internals/packages/modules/health-payments/src/components/bill_inbox/BillInbox.js (1 hunks)
• health/micro-ui/web/micro-ui-internals/packages/modules/health-payments/src/pages/employee/ViewAttendance.js (2 hunks)
• health/micro-ui/web/micro-ui-internals/packages/modules/health-payments/src/pages/employee/my_bills.js (1 hunks)

health/micro-ui/web/micro-ui-internals/packages/modules/health-payments/src/components/bill_inbox/BillInbox.js (10)

1-1: Remove unused and invalid imports

The imports useReducer, useMemo, and use are not used in this file. Additionally, use is not a valid React hook and may have been included by mistake. Please remove these to clean up the code.

---

5-5: Define location or use useLocation hook

The variable location is used but not defined in this scope. If you intend to access the browser's location or the route's state, consider importing useLocation from react-router-dom and using it to retrieve the location object.

---

23-23: Remove commented-out code

The commented-out line is unnecessary and can be removed to keep the code clean.

---

48-48: Simplify boolean expressions

The use of ternary operators returning boolean literals can be simplified by directly assigning the condition's result. This improves code readability.

Apply these changes:

At line 48:

- isChildrenRequired: selectedLevel != null && selectedLevel?.code === "DISTRICT" ? true : false,
+ isChildrenRequired: selectedLevel != null && selectedLevel?.code === "DISTRICT",

At line 51:

- enabled: selectedBoundaryCode && selectedProject ? true : false,
+ enabled: !!(selectedBoundaryCode && selectedProject),

At line 68:

- enabled: selectedBoundaryCode ? true : false,
+ enabled: !!selectedBoundaryCode,

Also applies to: 51-51, 68-68

🧰 Tools

🪛 Biome (1.9.4)

[error] 48-48: Unnecessary use of boolean literals in conditional expression.

Simplify your code by directly assigning the result without using a ternary operator.
If your goal is negation, you may use the logical NOT (!) or double NOT (!!) operator for clearer and concise code.
Check for more details about NOT operator.
Unsafe fix: Remove the conditional expression with

(lint/complexity/noUselessTernary)

---

186-194: Use a self-closing tag for <CustomInboxSearchLinks>

JSX elements without child content should be self-closing.

Apply this change:

<CustomInboxSearchLinks
    headerText={"HCM_AM_BILL_INBOX"}
    links={[
        {
            url: "/employee/payments/my-bills",
            text: "HCM_AM_MY_BILLS",
        },
    ]}
- ></CustomInboxSearchLinks>
+ />

🧰 Tools

🪛 Biome (1.9.4)

[error] 186-194: JSX elements without children should be marked as self-closing. In JSX, it is valid for any element to be self-closing.

Unsafe fix: Use a SelfClosingElement instead

(lint/style/useSelfClosingElements)

---

197-198: Use a self-closing tag for <BillSearchBox>

When a JSX element has no child content, prefer using a self-closing tag.

Apply this change:

<BillSearchBox
    onLevelSelect={handleSearchChange}
    initialProject={selectedProject}
    initialAggregationLevel={selectedLevel}
- ></BillSearchBox>
+ />

🧰 Tools

🪛 Biome (1.9.4)

[error] 197-198: JSX elements without children should be marked as self-closing. In JSX, it is valid for any element to be self-closing.

Unsafe fix: Use a SelfClosingElement instead

(lint/style/useSelfClosingElements)

---

211-217: Use a self-closing tag for <BillBoundaryFilter>

Prefer a self-closing tag for elements without children.

Apply this change:

<BillBoundaryFilter
    isRequired={ScreenTypeEnum.BILL}
    selectedProject={selectedProject}
    selectedLevel={selectedLevel}
    onFilterChange={handleFilterUpdate}
    updateBoundaryFilters={updateFilters}
- ></BillBoundaryFilter>
+ />

🧰 Tools

🪛 Biome (1.9.4)

[error] 211-217: JSX elements without children should be marked as self-closing. In JSX, it is valid for any element to be self-closing.

Unsafe fix: Use a SelfClosingElement instead

(lint/style/useSelfClosingElements)

---

254-263: Use a self-closing tag for <BillInboxTable>

JSX elements without child content should be self-closing.

Apply this change:

<Card>
  <BillInboxTable
      isFetching={isFetching}
      tableData={tableData}
      currentPage={currentPage}
      rowsPerPage={rowsPerPage}
      handlePageChange={handlePageChange}
      handlePerRowsChange={handlePerRowsChange}
      totalCount={totalCount}
      status={activeLink.code}
-   ></BillInboxTable>
+   />
</Card>

🧰 Tools

🪛 Biome (1.9.4)

[error] 254-263: JSX elements without children should be marked as self-closing. In JSX, it is valid for any element to be self-closing.

Unsafe fix: Use a SelfClosingElement instead

(lint/style/useSelfClosingElements)

---

273-285: Add a key property when returning elements in an array

Even if you only return a single element in an array, React recommends specifying a unique key to maintain stable identity across renders.

Apply these changes:

At lines 273-285:

actionFields={[
+  <Button
+    key="generate-bill-btn"
     icon="CheckCircle"
     label={t(`HCM_AM_GENERATE_BILL_LABEL`)}
     onClick={() => {
         triggerGenerateBill();
     }}
     style={{
         minWidth: "14rem",
     }}
     type="button"
     variation="primary"
     isDisabled={generateBillMutation.isLoading}
  />,
]}

At lines 296-312:

actionFields={[
+  <Button
+    key="generate-bill-btn-conditional"
     icon="CheckCircle"
     label={t(`HCM_AM_GENERATE_BILL_LABEL`)}
     onClick={() => {
         !showGenerateBillAction || BillData?.bills?.length >= 0
             ? setShowToast({ key: "info", label: t("HCM_AM_GENERATE_BILLS_CANNOT_BE_CALLED_INFO_MESSAGE"), transitionTime: 3000 })
             : triggerGenerateBill();
     }}
     style={{
         minWidth: "14rem",
         cursor: !showGenerateBillAction || BillData?.bills?.length >= 0 ? "not-allowed" : "pointer",
         opacity: !showGenerateBillAction || BillData?.bills?.length >= 0 ? 0.5 : 1,
     }}
     type="button"
     variation="primary"
     isDisabled={generateBillMutation.isLoading}
/>,
]}

Also applies to: 296-312

🧰 Tools

🪛 Biome (1.9.4)

[error] 273-285: Missing key property for this element in iterable.

The order of the items may change, and having a key can help React identify which item was moved.
Check the React documentation.

(lint/correctness/useJsxKeyInIterable)

---

300-308: Logical error in the onClick handler condition

The condition BillData?.bills?.length >= 0 will always be true because an array's length is always 0 or greater. This means triggerGenerateBill() will never be called.

Consider revising the condition to correctly reflect the intended logic. If you intend to check if there are no bills, you might use:

!showGenerateBillAction || BillData?.bills?.length > 0

This ensures that triggerGenerateBill() is called when there are no bills.

health/micro-ui/web/micro-ui-internals/packages/modules/health-payments/src/pages/employee/ViewAttendance.js (14)

16-16: Ensure safe access to location.state

Destructuring fromCampaignSupervisor from location.state || false can cause issues if location.state is null or not an object. Consider providing a default object to prevent errors.

Apply this diff:

- const { fromCampaignSupervisor } = location.state || false;
+ const { fromCampaignSupervisor } = location.state || {};

---

47-47: Simplify boolean expression

Simplify the condition by removing the unnecessary ternary operator.

Apply this diff:

- enabled: registerNumber ? true : false,
+ enabled: !!registerNumber,

🧰 Tools

🪛 Biome (1.9.4)

[error] 47-47: Unnecessary use of boolean literals in conditional expression.

Simplify your code by directly assigning the result without using a ternary operator.
If your goal is negation, you may use the logical NOT (!) or double NOT (!!) operator for clearer and concise code.
Check for more details about NOT operator.
Unsafe fix: Remove the conditional expression with

(lint/complexity/noUselessTernary)

---

85-85: Simplify boolean expression

Simplify the condition by removing the unnecessary ternary operator.

Apply this diff:

- enabled: ((AttendanceData ? true : false) && disabledAction && AttendanceData?.attendanceRegister?.[0]?.reviewStatus !== "APPROVED") || triggerEstimate,
+ enabled: (AttendanceData && disabledAction && AttendanceData?.attendanceRegister?.[0]?.reviewStatus !== "APPROVED") || triggerEstimate,

🧰 Tools

🪛 Biome (1.9.4)

[error] 85-85: Unnecessary use of boolean literals in conditional expression.

Simplify your code by directly assigning the result without using a ternary operator.
If your goal is negation, you may use the logical NOT (!) or double NOT (!!) operator for clearer and concise code.
Check for more details about NOT operator.
Unsafe fix: Remove the conditional expression with

(lint/complexity/noUselessTernary)

---

104-104: Simplify boolean expression

Simplify the condition by removing the unnecessary ternary operator.

Apply this diff:

- enabled: (AttendanceData ? true : false) && (!disabledAction || AttendanceData?.attendanceRegister?.[0]?.reviewStatus === "APPROVED"),
+ enabled: AttendanceData && (!disabledAction || AttendanceData?.attendanceRegister?.[0]?.reviewStatus === "APPROVED"),

🧰 Tools

🪛 Biome (1.9.4)

[error] 104-104: Unnecessary use of boolean literals in conditional expression.

Simplify your code by directly assigning the result without using a ternary operator.
If your goal is negation, you may use the logical NOT (!) or double NOT (!!) operator for clearer and concise code.
Check for more details about NOT operator.
Unsafe fix: Remove the conditional expression with

(lint/complexity/noUselessTernary)

---

279-279: Simplify boolean expression

Simplify the condition by removing the unnecessary ternary operator.

Apply this diff:

- enabled: individualIds.length > 0 ? true : false,
+ enabled: !!individualIds.length,

🧰 Tools

🪛 Biome (1.9.4)

[error] 279-279: Unnecessary use of boolean literals in conditional expression.

Simplify your code by directly assigning the result without using a ternary operator.
If your goal is negation, you may use the logical NOT (!) or double NOT (!!) operator for clearer and concise code.
Check for more details about NOT operator.
Unsafe fix: Remove the conditional expression with

(lint/complexity/noUselessTernary)

---

304-306: Simplify boolean expression

Simplify the condition by removing the unnecessary ternary operator.

Apply this diff:

- enabled: AttendanceData?.attendanceRegister[0]?.staff?.find(
-   (staff) => staff?.staffType?.includes("OWNER")
- )?.userId ? true : false,
+ enabled: !!AttendanceData?.attendanceRegister[0]?.staff?.find(
+   (staff) => staff?.staffType?.includes("OWNER")
+ )?.userId,

🧰 Tools

🪛 Biome (1.9.4)

[error] 304-306: Unnecessary use of boolean literals in conditional expression.

Simplify your code by directly assigning the result without using a ternary operator.
If your goal is negation, you may use the logical NOT (!) or double NOT (!!) operator for clearer and concise code.
Check for more details about NOT operator.
Unsafe fix: Remove the conditional expression with

(lint/complexity/noUselessTernary)

---

315-336: Handle cases where matchingIndividual may be undefined

In the getUserAttendanceSummary function, ensure that you handle cases where matchingIndividual is undefined to avoid potential runtime errors.

Consider updating the else block to use the individualId if available:

- return ["N/A", "Unknown", "N/A", "Unassigned", individualEntry?.modifiedTotalAttendance || individualEntry.actualTotalAttendance || 0];
+ return [individualEntry.individualId || "N/A", "Unknown", "N/A", "Unassigned", individualEntry?.modifiedTotalAttendance || individualEntry.actualTotalAttendance || 0];

---

345-345: Update dependencies in useEffect hook

The comment /// need to update dependency indicates missing dependencies in the useEffect hook. Ensure all necessary dependencies are included to prevent potential bugs.

Review and update the dependency array as needed.

---

388-390: Ensure the loader component is returned to display correctly

The <LoaderWithGap /> component inside the if block is not returned or rendered, so it won't display as intended.

Apply this diff:

- if (updateMutation.isLoading) {
-   <LoaderWithGap />
- }
+ if (updateMutation.isLoading) {
+   return <LoaderWithGap />;
+ }

---

479-489: Add a unique key prop to each element in actionFields

When rendering elements in arrays, each element should have a unique key prop to help React identify them.

Apply this diff:

disabledAction ? (
+  <Button
+    key="goBackButton"
     label={t(`HCM_AM_GO_BACK`)}
     title={t(`HCM_AM_GO_BACK`)}
     onClick={() => {
       fromCampaignSupervisor
         ? history.push(`/${window.contextPath}/employee/payments/generate-bill`, { fromViewScreen: true })
         : history.push(`/${window.contextPath}/employee/payments/registers-inbox`);
     }}
     type="button"
     style={{ minWidth: "14rem" }}
     variation="primary"
   />
) : ...

🧰 Tools

🪛 Biome (1.9.4)

[error] 479-489: Missing key property for this element in iterable.

The order of the items may change, and having a key can help React identify which item was moved.
Check the React documentation.

(lint/correctness/useJsxKeyInIterable)

---

491-503: Add a unique key prop to each element in actionFields

When rendering elements in arrays, each element should have a unique key prop to help React identify them.

Apply this diff:

) : editAttendance ? (
+  <Button
+    key="submitButton"
     icon="CheckCircle"
     label={t(`HCM_AM_SUBMIT_LABEL`)}
     title={t(`HCM_AM_SUBMIT_LABEL`)}
     onClick={() => {
       setUpdateDisabled(true);
       triggerMusterRollUpdate();
     }}
     style={{ minWidth: "14rem" }}
     type="button"
     variation="primary"
     isDisabled={updateMutation.isLoading || updateDisabled || !isSubmitEnabled}
   />
) : ...

🧰 Tools

🪛 Biome (1.9.4)

[error] 491-503: Missing key property for this element in iterable.

The order of the items may change, and having a key can help React identify which item was moved.
Check the React documentation.

(lint/correctness/useJsxKeyInIterable)

---

505-534: Add a unique key prop to each element in actionFields

When rendering elements in arrays, each element should have a unique key prop to help React identify them.

Apply this diff:

) : (
+  <Button
+    key="actionsButton"
     className="custom-class"
     iconFill=""
     label={t(`HCM_AM_ACTIONS`)}
     menuStyles={{
       bottom: "40px",
     }}
     onOptionSelect={(value) => {
       if (value.code === "EDIT_ATTENDANCE") {
         setOpenEditAlertPopUp(true);
       } else if (value.code === "APPROVE") {
         setOpenApproveCommentPopUp(true);
       }
     }}
     options={[
       {
         code: "EDIT_ATTENDANCE",
         name: t(`HCM_AM_ACTIONS_EDIT_ATTENDANCE`),
       },
       {
         code: "APPROVE",
         name: t(`HCM_AM_ACTIONS_APPROVE`),
       },
     ]}
     optionsKey="name"
     size=""
     style={{ minWidth: "14rem" }}
     title=""
     type="actionButton"
   />
)

🧰 Tools

🪛 Biome (1.9.4)

[error] 505-534: Missing key property for this element in iterable.

The order of the items may change, and having a key can help React identify which item was moved.
Check the React documentation.

(lint/correctness/useJsxKeyInIterable)

---

215-221: Avoid using setTimeout for navigation after showing toast

Using setTimeout to delay navigation can lead to unpredictable behavior. Consider using a callback or promise resolution to navigate after the toast has been displayed.

Apply this diff:

setShowToast({
  key: "success",
  label: t("HCM_AM_ATTENDANCE_UPDATED_SUCCESSFULLY"),
  transitionTime: 3000,
+ onClose: () => {
+   setUpdateDisabled(false);
+   history.push(`/${window.contextPath}/employee/payments/view-attendance?registerNumber=${registerNumber}&boundaryCode=${boundaryCode}`);
+ },
});
- // Delay the navigation for 3 seconds
- setTimeout(() => {
-   setUpdateDisabled(false);
-   history.push(`/${window.contextPath}/employee/payments/view-attendance?registerNumber=${registerNumber}&boundaryCode=${boundaryCode}`);
- }, 3000);

---

224-225: Ensure a default error message is displayed

When handling errors, ensure that a default message is shown if error?.response?.data?.Errors is undefined or empty to prevent displaying undefined to the user.

Apply this diff:

onError: (error) => {
  setUpdateDisabled(false);
- setShowToast({ key: "error", label: t(error?.response?.data?.Errors?.[0]?.message), transitionTime: 3000 });
+ const errorMessage = error?.response?.data?.Errors?.[0]?.message || t("COMMON_ERROR_MESSAGE");
+ setShowToast({ key: "error", label: errorMessage, transitionTime: 3000 });
}

health/micro-ui/web/micro-ui-internals/packages/modules/health-payments/src/components/MyBillsTable.js (3)

140-140: 🧹 Nitpick (assertive)

Simplify boolean expression in showBottom prop.

The expression showBottom={isLastRow ? false : true} can be simplified by negating isLastRow, which enhances code clarity.

Apply this change:

- showBottom={isLastRow ? false : true}
+ showBottom={!isLastRow}

Likely invalid or redundant comment.

🧰 Tools

🪛 Biome (1.9.4)

[error] 140-140: Unnecessary use of boolean literals in conditional expression.

Simplify your code by directly assigning the result without using a ternary operator.
If your goal is negation, you may use the logical NOT (!) or double NOT (!!) operator for clearer and concise code.
Check for more details about NOT operator.
Unsafe fix: Remove the conditional expression with

(lint/complexity/noUselessTernary)

---

77-81: 🧹 Nitpick (assertive)

Destructure props instead of using spread operator.

Destructuring specific props improves readability and makes it explicit which props are being used.

Apply this change:

- const MyBillsTable = ({ ...props }) => {
+ const MyBillsTable = ({ data, handlePageChange, handlePerRowsChange, onRowSelect }) => {

Update all instances of props within the component to use the destructured variables.

Likely invalid or redundant comment.

---

225-237: 🧹 Nitpick (assertive)

Remove unnecessary placeholder functions.

The onFilter, onSelectedRowsChange, and customSortFunction props have placeholder functions that are not implemented. Consider removing them or providing actual implementations to clean up the code.

Apply these changes:

- onFilter={function noRefCheck() { }}
+ onFilter={null}

- selection={{
-     addCheckbox: false,
-     checkboxLabel: "",
-     initialSelectedRows: [],
-     onSelectedRowsChange: function noRefCheck() { },
-     showSelectedState: false,
- }}
+ selection={{
+     addCheckbox: false,
+     checkboxLabel: "",
+     initialSelectedRows: [],
+     onSelectedRowsChange: null,
+     showSelectedState: false,
+ }}

- sorting={{
-     customSortFunction: function noRefCheck() { },
-     initialSortOrder: "",
-     isTableSortable: false,
- }}
+ sorting={{
+     customSortFunction: null,
+     initialSortOrder: "",
+     isTableSortable: false,
+ }}

Likely invalid or redundant comment.

health/micro-ui/web/micro-ui-internals/packages/modules/health-payments/src/components/MyBillsSearch.js (3)

18-18: Avoid using state as a key prop.

Using state variables as keys in components like DateRangePicker can lead to unintended behavior. Instead, consider controlling re-renders through props or using a different approach.

---

49-49: 🧹 Nitpick (assertive)

Use self-closing tag for <TextBlock> component.

Since <TextBlock> has no children, it can be self-closed to improve code readability.

Apply this change:

- <TextBlock body={`${t("HCM_AM_BILL_ID")}`}></TextBlock>
+ <TextBlock body={`${t("HCM_AM_BILL_ID")}`} />

Likely invalid or redundant comment.

🧰 Tools

🪛 Biome (1.9.4)

[error] 49-49: JSX elements without children should be marked as self-closing. In JSX, it is valid for any element to be self-closing.

Unsafe fix: Use a SelfClosingElement instead

(lint/style/useSelfClosingElements)

---

71-76: 🧹 Nitpick (assertive)

Add key props to buttons in ButtonGroup.

Each child in an array should have a unique key prop to help React identify which items have changed.

Apply these changes:

<ButtonGroup
  buttonsArray={[
    <Button
+     key="clear-button"
      variation="teritiary"
      label={t(`HCM_AM_CLEAR`)}
      type="button"
      onClick={handleClear}
      size="large"
    />,
    <Button
+     key="search-button"
      variation="primary"
      label={t(`HCM_AM_SEARCH`)}
      type="button"
      onClick={handleSearch}
      size="large"
    />,
  ]}
/>

Likely invalid or redundant comment.

🧰 Tools

🪛 Biome (1.9.4)

[error] 71-76: JSX elements without children should be marked as self-closing. In JSX, it is valid for any element to be self-closing.

Unsafe fix: Use a SelfClosingElement instead

(lint/style/useSelfClosingElements)

---

[error] 73-73: Missing key property for this element in iterable.

The order of the items may change, and having a key can help React identify which item was moved.
Check the React documentation.

(lint/correctness/useJsxKeyInIterable)

---

[error] 74-74: Missing key property for this element in iterable.

The order of the items may change, and having a key can help React identify which item was moved.
Check the React documentation.

(lint/correctness/useJsxKeyInIterable)

health/micro-ui/web/micro-ui-internals/packages/modules/health-payments/src/pages/employee/my_bills.js (4)

43-49: 🛠️ Refactor suggestion

Add dependency array to useEffect to prevent unnecessary re-renders.

The useEffect hook for cleaning up session storage lacks a dependency array, which can cause it to run on every render.

Add an empty dependency array to ensure it runs only once:

useEffect(() => {
  // Cleanup code
- });
+ }, []);

Likely invalid or redundant comment.

---

79-84: ⚠️ Potential issue

Remove hardcoded report IDs from reportDetails.

Hardcoding report IDs can lead to security risks and should be avoided. Use placeholder values or fetch them dynamically.

Apply this change:

const reportDetails = individualEntry?.additionalDetails?.reportDetails || {
  "status": "FAILED", // INITIATED, COMPLETED, FAILED
- "pdfReportId": "d5a504fb-ebb8-41be-afa0-24b4f1bd575b",
- "excelReportId": "de5f2b24-b60d-4d1f-b550-56abe1dabb2f",
+ "pdfReportId": "",
+ "excelReportId": "",
  "errorMessage": "HCM_AM_BILL_REPORT_GENERATION_FAILED"
};

Likely invalid or redundant comment.

---

54-69: 🧹 Nitpick (assertive)

Improve robustness of formatTimestampToDate function.

Enhance the function to handle various input types and invalid dates more gracefully.

Apply these changes:

function formatTimestampToDate(timestamp) {
  if (!timestamp || (typeof timestamp !== "number" && typeof timestamp !== "string")) {
    return t("INVALID_TIMESTAMP");
  }
  const date = new Date(timestamp);
+ if (isNaN(date.getTime())) {
+   return t("INVALID_DATE");
+ }
  // Existing date formatting
}

Likely invalid or redundant comment.

---

116-127: 🧹 Nitpick (assertive)

Add ARIA attributes for better accessibility.

Enhance the accessibility of your application by adding appropriate ARIA roles and labels to components.

Example:

<Card>
+ <div role="region" aria-label={t("HCM_AM_MY_BILLS")}>
  {isFetching ? (
    <Loader aria-label={t("LOADING")} />
  ) : tableData.length === 0 ? (
    <NoResultsFound text={t(`HCM_AM_NO_DATA_FOUND_FOR_BILLS`)} role="alert" />
  ) : (
    <MyBillsTable data={tableData} aria-label={t("HCM_AM_BILLS_TABLE")} />
  )}
+ </div>
</Card>

Likely invalid or redundant comment.

health/micro-ui/web/micro-ui-internals/packages/modules/health-payments/src/components/DateRangePicker.js (2)

1-34: LGTM! Well-structured imports and utility functions.

The imports are well-organized and the utility functions are clear and focused.

---

197-197: Use self-closing tag for TextBlock component.

🧰 Tools

🪛 Biome (1.9.4)

[error] 197-197: JSX elements without children should be marked as self-closing. In JSX, it is valid for any element to be self-closing.

Unsafe fix: Use a SelfClosingElement instead

(lint/style/useSelfClosingElements)